<template>
  <div class="base_bg_container">
    <div class="newPlate-container">
      <div class="detailContent">
        <p><i class='titleleftbar'></i><span>平台基本信息</span></p>
        <!-- <el-button type="primary" plain size="mini" @click="back">返回</el-button> -->
      </div>
      <el-form ref="form" :model="form" label-width="150px" :rules="formRules" class='addplate'>
        <el-form-item label="分管账套名称" prop="name">
          <el-input v-model="form.name" size="small" />
        </el-form-item>
        <el-form-item label="平台名称" prop="pname">
          <el-input v-model="form.pname" size="small" />
        </el-form-item>
        <el-form-item label="所在区域" prop="city">
          <sanji v-model="form.city" :fill-data="filldataArr" @ssqchange="changesanji" />
        </el-form-item>
        <el-form-item label="使用周期" prop="data">
          <el-col :span="3">
            <el-date-picker
              ref="date1"
              v-model="form.data.date1"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%;"
              size="small"
              format=" yyyy-MM-dd"
            />
          </el-col>
          <el-col class="line" :span="1" style="text-align: center;">至</el-col>
          <el-col :span="3">
            <el-date-picker
              ref="date2"
              v-model="form.data.date2"
              type="date"
              placeholder="选择截止日期"
              style="width: 100%;"
              size="small"
              format=" yyyy-MM-dd"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="禁用状态" prop="delivery" required>
          <el-switch v-model="form.delivery" active-color="#13ce66" inactive-color="#ddd" />
        </el-form-item>
        <el-form-item label="管理员姓名" prop="glname">
          <el-input v-model="form.glname" size="small" />
        </el-form-item>
        <el-form-item label="管理员账号" prop="glacNum">
          <el-input v-model="form.glacNum" size="small" />
        </el-form-item>
        <el-form-item label="备注说明" prop="desc">
          <el-input v-model="form.desc" type="textarea" size="small" />
        </el-form-item>
        
      </el-form>      
    </div>
    <div class='btngroups'>
      <el-button type="primary" size="mini" @click="onSubmit" round>保存</el-button>
      <el-button type="primary" size="mini" @click="onSave" round>保存,继续配置功能</el-button>
      <el-button size="mini" @click="onCancel" round>取消</el-button>
    </div>
  </div>
</template>
<script>
import sanji from '@/components/sanjiliandong'
export default {
  name: 'AcMangentnewPlate',
  components: {
    sanji
  },
  data() {
    var checkData = (rule, value, callback) => {
      if (value.date1 !== '' && value.date2 == '') {
        callback(new Error('请选择截止日期'))
      } else if (value.date1 == '' && value.date2 == '') {
        callback(new Error('请选择使用周期'))
      } else {
        callback()
      }
    }
    var checkCity = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请选择所在区域'))
      } else {
        callback()
      }
    }
    return {
      filldataArr: [], // 三级联动数据回填
      sanjidata: '',
      form: {
        name: '',
        pname: '',
        city: '',
        data: {
          date1: '',
          date2: ''
        },
        delivery: false,
        glname: '',
        glacNum: '',
        desc: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入分管账套名称', trigger: 'blur' }],
        pname: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
        glname: [{ required: true, message: '请输入管理员名称', trigger: 'blur' }],
        glacNum: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
        data: [{ required: true, message: '请选择使用周期', trigger: ['blur', 'change'], validator: checkData }],
        city: [{ required: true, message: '请选择所在区域', trigger: ['blur', 'change'], validator: checkCity }]

      }
    }
  },
  methods: {
    changesanji(data) {
      console.log(data)
      this.form.city = data
      this.sanjidata = data
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
        // 提交表单请求数据
          console.log('submit!')
          this.$refs.form.resetFields()
          this.form.data.date1 = ''
          this.form.data.date2 = ''
          this.$emit('closeDia')
        } else {
          return false
        }
      })
    },
    onSave() {},
    onCancel() {
      this.$refs.form.resetFields()
      this.form.data.date1 = ''
      this.form.data.date2 = ''
    },
    // back(){
    //   this.$router.go(-1);
    // }
  }
}
</script>
<style lang="scss">
  .el-input{
    position: relative;
    font-size: 14px;
    display: inline-block;
    width:200px;
  }
  .el-textarea {
    display: inline-block;
    width: 400px;
    vertical-align: bottom;
    font-size: 14px;
  }
 
</style>
<style lang="scss" scoped>
.newPlate-container{
  background: #fff;
  .detailContent{
     display:flex;
     justify-content:space-between;
     align-items:center;
    height: 50px;
    line-height:50px;
    padding:0 10px;
    span{
      padding:0 0 0 10px;
    }
  }
  .addplate{
    padding: 0 0 10px 0;
  }
}
.btngroups{
  margin:10px 0 0 0;
}
</style>
